<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聆语 - 首页</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 0;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            width: 250px;
            background-color: white;
        }
        .sidebar-header {
            padding: 1.5rem;
            background-color: #0d6efd;
            color: white;
        }
        .sidebar-menu {
            padding: 1rem 0;
        }
        .sidebar-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1.5rem;
            color: #333;
            text-decoration: none;
            transition: all 0.3s;
        }
        .sidebar-item:hover {
            background-color: #f8f9fa;
            color: #0d6efd;
        }
        .sidebar-item.active {
            background-color: #e9ecef;
            color: #0d6efd;
            border-left: 4px solid #0d6efd;
        }
        .sidebar-icon {
            margin-right: 0.75rem;
            font-size: 1.25rem;
        }
        .main-content {
            margin-left: 0;
            transition: margin-left 0.3s;
            padding: 1.5rem;
        }
        .page-content {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .mobile-header {
            display: none;
            background-color: #0d6efd;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        .mobile-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            z-index: 100;
        }
        .mobile-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem;
            color: #6c757d;
            text-decoration: none;
            font-size: 0.75rem;
        }
        .mobile-nav-item.active {
            color: #0d6efd;
        }
        .mobile-nav-icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .content-wrapper {
            padding-bottom: 4rem;
        }
        
        /* 响应式布局 */
        @media (min-width: 768px) {
            .main-content {
                margin-left: 250px;
            }
            .mobile-header, .mobile-nav {
                display: none;
            }
        }
        
        @media (max-width: 767.98px) {
            .sidebar {
                display: none;
            }
            .mobile-header, .mobile-nav {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- PC端侧边菜单 -->
    <div class="sidebar d-none d-md-block">
        <div class="sidebar-header">
            <h5 class="mb-0">聆语</h5>
        </div>
        <div class="sidebar-menu">
            <a href="#home" class="sidebar-item active" data-page="homePage">
                <i class="bi bi-house-door sidebar-icon"></i>
                <span>首页</span>
            </a>
            <a href="#device" class="sidebar-item" data-page="devicePage">
                <i class="bi bi-device-hdd sidebar-icon"></i>
                <span>设备中心</span>
            </a>
            <a href="#profile" class="sidebar-item" data-page="profilePage">
                <i class="bi bi-person sidebar-icon"></i>
                <span>个人中心</span>
            </a>
        </div>
    </div>
    
    <!-- 移动端顶部标题 -->
    <div class="mobile-header d-md-none">
        <h5 class="mb-0">聆语</h5>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
        <div class="content-wrapper">
            <div id="homePage" class="page-content active">
                <h2 class="mb-4">首页</h2>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">欢迎使用聆语</h5>
                                <p class="card-text">这是您的个人主页，您可以在这里查看系统概览和重要通知。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">系统状态</h5>
                                <p class="card-text">系统运行正常，所有服务均已启动。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="devicePage" class="page-content">
                <h2 class="mb-4">设备中心</h2>
                <div class="row">
                    <div class="col-md-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">设备 1</h5>
                                <p class="card-text">状态: 在线</p>
                                <button class="btn btn-primary btn-sm">查看详情</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">设备 2</h5>
                                <p class="card-text">状态: 离线</p>
                                <button class="btn btn-secondary btn-sm">查看详情</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">设备 3</h5>
                                <p class="card-text">状态: 在线</p>
                                <button class="btn btn-primary btn-sm">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="profilePage" class="page-content">
                <h2 class="mb-4">个人中心</h2>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">个人信息</h5>
                                <p class="card-text">用户名: 测试用户</p>
                                <p class="card-text">邮箱: test@example.com</p>
                                <p class="card-text">手机: 138****8888</p>
                                <button class="btn btn-primary">编辑信息</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">账户安全</h5>
                                <p class="card-text">上次登录: 2023-06-01 12:30:45</p>
                                <button class="btn btn-warning">修改密码</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 移动端底部导航 -->
    <nav class="mobile-nav d-md-none">
        <div class="row g-0">
            <div class="col-4">
                <a href="#home" class="mobile-nav-item active" data-page="homePage">
                    <i class="bi bi-house-door mobile-nav-icon"></i>
                    <span>首页</span>
                </a>
            </div>
            <div class="col-4">
                <a href="#device" class="mobile-nav-item" data-page="devicePage">
                    <i class="bi bi-device-hdd mobile-nav-icon"></i>
                    <span>设备中心</span>
                </a>
            </div>
            <div class="col-4">
                <a href="#profile" class="mobile-nav-item" data-page="profilePage">
                    <i class="bi bi-person mobile-nav-icon"></i>
                    <span>个人中心</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- Bootstrap JS 和依赖 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    
    <script>
        $(document).ready(function() {
            //检查登录状态
            if (!localStorage.getItem('isLoggedIn')) {
                window.location.href = 'login.html';
            }

            // 导航切换函数
            function switchPage(targetPage) {
                // 更新移动端导航状态
                $('.mobile-nav-item').removeClass('active');
                $(`.mobile-nav-item[data-page="${targetPage}"]`).addClass('active');
                
                // 更新PC端侧边菜单状态
                $('.sidebar-item').removeClass('active');
                $(`.sidebar-item[data-page="${targetPage}"]`).addClass('active');
                
                // 更新页面显示
                $('.page-content').removeClass('active');
                $(`#${targetPage}`).addClass('active');
            }

            // 移动端底部导航点击事件
            $('.mobile-nav-item').on('click', function(e) {
                e.preventDefault();
                const targetPage = $(this).data('page');
                switchPage(targetPage);
            });
            
            // PC端侧边菜单点击事件
            $('.sidebar-item').on('click', function(e) {
                e.preventDefault();
                const targetPage = $(this).data('page');
                switchPage(targetPage);
            });
        });
    </script>
</body>
</html> 